Il est possible de drastiquement de réduire la taille des fichiers de son site Wordpress grâce au système de minification. Pas sûr que ce terme soit dans le dictionnaire Larousse, mais c'est l'anglicisme consacré pour parler de réduction de poids des fichiers HTML, Javascript et CSS.
Qu'est-ce que la minification ?La minification est une pratique très connue des développeurs qui consistent à supprimer tous les espaces inutiles d'une page de code. Concrètement, cela consiste à faire cela :
Pas exactement de la rocket science me direz-vous ... En effet ! Mais l'impact sur le temps de chargement d'une page n'est pas négligeable. D'autant qu'il est possible de minifier tous les fichiers "statiques" que votre navigateur va charger lorsqu'il se connecte à votre site :
Les pages de code HTML, qui indiquent la structure de votre contenuLe code CSS, qui indique la mise en page (couleur, ...) de votre siteLe javascript, qui permet toutes les interactions avec le navigateurC'est donc une action qui impacte une grande partie de votre site, et qui peut avoir un réel impact sur le temps de chargement de vos internautes.
Les meilleurs plugins pour minifier son site WordpressDe nombreux plugins vous permettent de minifier votre site Wordpress. En voici une sélection, parmi les plus efficaces et les plus puissants.
Minifier avec WP-RocketNous en parlons dans notre article qui concerne les extensions de cache de Wordpress : WP-Rocket ! Ce plugin français propose, parmi ses nombreuses fonctionnalités, un outil de minification des fichiers HTML, CSS et Javascript.
Outre la minification, WP-Rocket permet également de combiner les fichiers CSS par exemple, afin de les fusionner en un seul fichier. L'intérêt ? Votre navigateur ne télécharge qu'un seul fichier pour gérer l'affichage du site que vous consultez. C'est donc moins de requêtes réalisées au serveur, et donc un temps de chargement théoriquement plus rapide.
WP-Rocket coûte 49€ / an.
Minifier avec AutoptimizeClairement, Autoptimize est le pur player de la compression et minification des fichiers Wordpress. Ce plugin, gratuit, ne fait que cela, mais il le fait très bien. Avec plus d'un million de téléchargements, son efficacité n'est plus à démontrer.
Son autre point fort : il fonctionne bien avec d'autres extensions de cache par exemple. Autoptimize est devenu un tel leader que les autres plugins font très attention à ne pas rentrer en conflit avec ce qu'il fait, afin de lui laisser la main au besoin. Pour nous, c'est le must à installer sur son Wordpress.
Exemple de gestion de conflits entre WP-Rocket Autoptimize
Interface de Autoptimize
Critical CSSOn ne peut évoquer Autoptimize sans parler de l'un de ses "power up" qui vaut vraiment le détour : Critical CSS. Ce plugin va vous permettre d'aller encore plus loin pour accélérer le chargement de votre site.
Qu'est-ce que le CSS Critique ?Le CSS critique, c'est l'ensemble du code CSS minimal qui permet l'affichage correct de votre site à l'internaute. Parfois, au chargement, le site se charge de manière quelque peu aléatoire, avec du contenu bloqué car mal optimisé. L'option Critical CSS va automatiquement identifier et afficher à l'internaute le CSS indispensable à l'affichage correct de votre site, a minima en haut de page.
Conséquences :
La perception de la vitesse pour l'internaute est fortement accrueVotre score au Google Speed Test augmentera immédiatementPrix de Critical CSSOn recommande fortement l'utilisation d'un tel outil combiné avec Autoptimize. Le seul problème : il n'est pas gratuit !
Il faut compter £2 / mois, soit environ 2,23 € / mois à l'heure où ces lignes sont écrites !
D'autres extensions pour minifier son siteIl existe d'autres extensions gratuites pour minifier son site, mais à tester avec prudence car elles ne semblent plus maintenues par leur éditeur. Par exemple: Better WordPress Minify ou encore Minify HTML. Compte tenu de l'efficacité de Autoptimize, ce n'est pas forcément surprenant !
Les risques de la minificationUn grand pouvoir implique de grandes responsabilités ! En effet, la minification n'est pas toujours aussi simple qu'elle n'y paraît. Ill faut rester prudent lors de son application, car elle est parfois incompatible avec certains thèmes ou plugins. S'agissant d'une procédure automatique, réduire les espaces dans les fichiers sources peut provoquer des anomalies d'affichage, et parfois casser directement votre design.
Il est donc préférable d'avancer par étape lorsque vous activez ces fonctionnalités, en suivant la procédure suivante :
Sauvegarder votre Wordpress, pour avoir une backup en cas de force majeureActiver, les unes après les autres et non en même temps, les options de minifications HTML, puis CSS et enfin Javascript.Entre chaque activiation, vérifier en navigation qu'il n'y a pas de souci d'affichage ou de fonctionnement sur votre site.Il est tout à fait possible que certaines options fonctionnent sans souci, et d'autres vous posent des problèmes. Ce n'est pas grave.
Tester les impacts de la minificationUne fois la minification activée, et après avoir vidé votre cache, vous pouvez utiliser Google Speed Test ou GT Metrix pour immédiatement constater l'impact sur le temps de chargement de votre site. D'autres outils existent pour auditer la performance de votre site web.